<template>
  <view class="analysis-wrap">
    <back :back-title="backTitle" class="back"></back>
		<view class="container">
			 <user-info></user-info>
			<tab-bar @change="handleChange" @calcHeight="handleCalcHeight" :currentIndex="currentIndex"></tab-bar>
			<view class="swiper-container" :style="{height: height + 'px'}">
			  <view v-if="currentIndex === 0" class="swipe-item">
			    <quality></quality>
			  </view>
			  <view v-if="currentIndex === 1" class="swipe-item">
			    <score></score>
			  </view>
			  <view v-if="currentIndex === 2" class="swipe-item">
			    <single-score></single-score>
			  </view>
			  <view v-if="currentIndex === 3" class="swipe-item">
			    <award></award>
			  </view>
			  <view v-if="currentIndex === 4" class="swipe-item">
			    <guardian></guardian>
			  </view>
			</view>
		</view>
  </view>
</template>

<script>
import userInfo from './components/userInfo'
import tabBar from './components/tabBar'
import quality from './components/quality'
import score from './components/scroe'
import singleScore from './components/single.vue'
import award from './components/award'
import guardian from './components/guardian'

export default {
  name: 'analysis',
  components: {
    userInfo,
    tabBar,
    quality,
    score,
		award,
    singleScore,
    guardian
  },
  data() {
    return {
      backTitle: '综合分析',
      currentIndex: 0,
      height: 1
    }
  },
  methods: {
    handleChange(index) {
      this.currentIndex = index
    },
    handleCalcHeight(height) {
      const _this = this
      uni.getSystemInfo({
        success(res){
          _this.height = res.windowHeight - height
        }
      })
    },
    // swiper
    handleSwiperIndex(e) {
      this.currentIndex = e.detail.current
    }
  }
}

</script>
<style lang='scss' scoped>
.analysis-wrap{
  width: 100%;
  min-height: 100vh;
  background-color: #f0f0f0;
  .swiper-container{
    width: 100%;
  }
	.back{
		position: fixed;
		z-index: 10;
		width: 100%;
		top:0;
		left: 0;
	}
	.container{
		width: 100%;
		padding-top:158upx;
		box-sizing: border-box;
	}
	.swipe-item{
		min-height: 100%;
		overflow-y: scroll;
	}
}
</style>